<!--
 * @Author: 赵成刚-货源单详情
-->
<template>
  <view class="sourcegoodsdetail-box">
    <view class="sourcegoodsdetail-item-big-box">
      <view class="myRecommendation-box">
        <view class="myRecommendation-top-box u-flex u-row-between">
          <view class="u-flex item-name-style">
            <view>
              货物名称：
              {{ formData.cargoName }}
            </view>
          </view>
          <view class="u-flex transTotalPrice-big-box">
            总价:￥<view class="transTotalPrice-box">
              {{ formData.freightTotalPrice }}
            </view>
          </view>
        </view>
        <view class="content">
          <view class="myRecommendation-center-box">
            <view>
              <view class="startingPoint-big-box">
                <view>
                  <view class="province-box">
                    <view>{{
                      formData.loadPlaceSplit && formData.loadPlaceSplit.city
                    }}</view>
                  </view>
                  <view class="city-box">
                    <view>{{
                      formData.loadPlaceSplit && formData.loadPlaceSplit.county
                    }}</view>
                  </view>
                </view>
                <image
                  class="address-icon"
                  :src="`${imgUrl}address-arrow.png`"
                />
                <view>
                  <view class="province-box">
                    <view>{{
                      formData.targetPlaceSplit &&
                      formData.targetPlaceSplit.city
                    }}</view>
                  </view>
                  <view class="city-box">
                    <view>{{
                      formData.targetPlaceSplit &&
                      formData.targetPlaceSplit.county
                    }}</view>
                  </view>
                </view>
              </view>
              <view class="weight-box">
                <!-- 货原单 -->
                <view class="u-flex">
                  <view class="weight-box-lable">单价：</view>
                  <view class="weight-box-content">
                    {{ formData.freightUnitPrice }}元/吨
                  </view>
                </view>
                <view class="u-flex">
                  <view class="weight-box-lable">重量:</view>
                  <view class="weight-box-content">
                    {{ formData.sourceUnitWeight }}吨/车
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex">
          装货信息
          <view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItem1List.slice(0, 2)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex">
          <view>收款银行卡信息</view>
          <view class="card-icon-box">
            <view> </view>
            <view> </view>
          </view>
          <view class="changeCard">
            <u-button type="primary" size="medium" @click="changeCardShowBox">
              更换收款卡
            </u-button>
          </view>
        </view>
        <view v-for="(item, index) in formItem2List.slice(0, 3)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          font-size: 28rpx;
          font-weight: 400;
          color: #f97825;
          line-height: 40rpx;
          margin: 15rpx 0;
        "
      >
        系统提示：请您仔细核对，以免产生不必要的麻烦
      </view>
      <u-checkbox-group style="margin: 20rpx">
        <u-checkbox @change="signChange" v-model="sign" size="30">
          我已仔细阅读并理解
          <span class="sign" @click="useragreementBtn"> 《运输服务合同》 </span>
          及<br />
          <span class="sign" @click.stop="goSign"> 《电子签名授权书》 </span>
        </u-checkbox>
      </u-checkbox-group>
    </view>
    <view class="btns">
      <u-button type="primary" @click="trulyConfirmBefore" class="btn">
        确认抢单
      </u-button>
    </view>
    <u-popup
      v-model="cardBoxShow"
      mode="bottom"
      :closeOnClickOverlay="false"
      height="500rpx"
    >
      <view class="pop-title">
        <u-icon
          class="pop-icon"
          name="arrow-left"
          size="38"
          @click="cardBoxShow = false"
        ></u-icon>
        <view class="pop-text">更换收款卡</view>
      </view>
      <view
        class="card-list"
        v-for="(item, index) in formCardData"
        :key="index"
        @click="chooseCardClick(item, index)"
      >
        <image
          class="bank-icon"
          src="../../../static/bank/bank-icon1.png"
          v-if="item.bankName == '1'"
        />
        <image
          class="bank-icon"
          src="../../../static/bank/bank-icon2.png"
          v-if="item.bankName == '2'"
        />
        <image
          class="bank-icon"
          src="../../../static/bank/bank-icon3.png"
          v-if="item.bankName == '3'"
        />
        <image
          class="bank-icon"
          src="../../../static/bank/bank-icon4.png"
          v-if="item.bankName == '4'"
        />
        <image
          class="bank-icon"
          src="../../../static/bank/bank-icon5.png"
          v-if="item.bankName == '5'"
        />
        <view>
          {{ item.bankShortName + '(' + item.bankCardNo.substr(-4) + ')' }}
        </view>
        <image
          class="bank-select"
          src="../../../static/bank-select.png"
          v-if="bankCurrent == index"
        />
      </view>
    </u-popup>
    <checkPrice
      :checkPriceShow="checkPriceShow"
      @confirm="checkPriceConfirm"
      @cancel="checkPriceCancel"
      :resultMessage="resultMessage"
    />
    <bankConfirmModal
      :showModal="showBankModal"
      @confirm="bankConfirm"
      :submitObj="formItem2List"
      @cancel="bankCancel"
    />
  </view>
</template>
<script>
import checkPrice from '../../../components/C_tipModal/checkPrice.vue'
import bankConfirmModal from './bankConfirmModal.vue'
import { imgUrl } from 'common/httpEnum'

export default {
  components: {
    checkPrice,
    bankConfirmModal,
  },
  name: 'sourcegoodsdetail',
  data() {
    return {
      imgUrl,
      showBankModal: false,
      sign: false,
      cardBoxShow: false,
      checkPriceShow: false,
      formData: {},
      formCardData: {},
      id: undefined,
      formItem1List: [
        {
          name: '车牌号',
          key: 'headNo',
          value: '',
        },
        {
          name: '挂车号',
          key: 'attachNo',
          value: '',
        },
      ],
      formItem2List: [
        {
          name: '卡号',
          key: 'bankCardNo',
          value: '',
        },
        {
          name: '银行名称',
          key: 'bankShortName',
          value: '',
        },
        {
          name: '持卡人',
          key: 'userName',
          value: '',
        },
      ],
      defaultCard: {},
      resultMessage: undefined,
      bankCurrent: 0,
    }
  },
  onLoad(options) {
    this.id = options.sourceId
    this.initData()
    // this.getDataList()
    this.getCardDataList()
  },
  onShow() {},
  methods: {
    goSign() {
      uni.navigateTo({ url: '/pages/drivertabbar/sourcegoods/sign' })
    },
    initData() {
      this.formData = uni.getStorageSync('sourcegoodsDetail')
      this.formItem1List.forEach((item) => {
        for (const key in this.formData) {
          if (Object.prototype.hasOwnProperty.call(this.formData, key)) {
            if (item.key === key && this.formData[key]) {
              item.value = this.formData[key]
            }
          }
        }
      })
    },
    chooseCardClick(item, index) {
      this.bankCurrent = index
      item.checked = true
      this.cardBoxConfirm(item)
    },
    cardBoxConfirm(bankInfo) {
      let card = {
        bankCardNo: bankInfo.bankCardNo,
        bankNameValue: bankInfo.bankNameValue,
        bankShortName: bankInfo.bankShortName,
        userName: bankInfo.userName,
        bankId: bankInfo.bankId,
      }
      this.defaultCard = card
      this.evaluateCard('next')
    },
    async getDataList() {
      const params = {
        sourceId: this.id,
      }
      let url = ''
      let userInfo = uni.getStorageSync('userInfo')
      if (Object.keys(userInfo).length) {
        url = '/freight-business/freightSource/driver/app/sourceDetail'
      } else {
        url = '/freight-business/freightSource/visitor/app/sourceDetail '
      }
      const { code, result, message } = await this.$u.get(url, params)
      if (code === '0') {
        this.formData = result
        this.formItem1List.forEach((item) => {
          for (const key in result) {
            if (Object.prototype.hasOwnProperty.call(result, key)) {
              if (item.key === key && result[key]) {
                item.value = result[key]
              }
            }
          }
        })
      } else {
        this.$api.msg(message)
      }
    },
    async getCardDataList() {
      const params = {
        id: this.id,
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightUserBank/page',
        params
      )
      if (code === '0') {
        this.formCardData = result.records
        if (this.formCardData.length == 0) return
        this.defaultCard = this.formCardData.find(
          (item) => item.defaultFlag == '1'
        )
        this.bankCurrent = result.records.findIndex((item) => {
          return item.defaultFlag == 1
        })
        this.evaluateCard('ori')
      } else {
        this.$api.msg(message)
      }
    },
    evaluateCard(val) {
      this.formItem2List.forEach((item) => {
        for (const key in this.defaultCard) {
          if (Object.prototype.hasOwnProperty.call(this.defaultCard, key)) {
            if (item.key === key && this.defaultCard[key]) {
              item.value = this.defaultCard[key]
            }
          }
        }
      })
      if (val == 'next') {
        this.$api.msg('更换收款卡成功!')
        this.cardBoxShow = false
      }
    },
    checkPriceConfirm() {
      this.checkPriceShow = false
      this.nowConfirm()
    },
    checkPriceCancel() {
      this.checkPriceShow = false
    },
    bankConfirm() {
      this.showBankModal = false
      this.trulyConfirm()
    },
    bankCancel() {
      this.showBankModal = false
    },
    trulyConfirmBefore() {
      if (!this.sign) {
        return this.$api.msg('请先勾选协议')
      }
      if (!this.defaultCard.bankId) {
        return this.$api.msg('请先添加银行卡')
      }
      this.showBankModal = true
    },
    //询问运价改变是否确认
    async trulyConfirm() {
      const params = {
        sourceId: this.id,
        freightUnitPrice: this.formData.freightUnitPrice,
      }
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightSource/driver/priceCheck',
        params
      )
      if (code === '0') {
        if (result != null) {
          this.resultMessage = result
          return (this.checkPriceShow = true)
        } else {
          this.nowConfirm()
        }
      } else {
        this.$api.msg(message)
      }
    },
    async nowConfirm() {
      let userInfo = uni.getStorageSync('userInfo')
      const params = {
        sourceId: this.id,
        carId: userInfo.carInfo.carId,
        bankId: this.defaultCard.bankId,
      }
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchGrab',
        params
      )
      if (code === '0') {
        this.$api.msg('抢单成功!')
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/drivertabbar/waybill/waybill',
          })
        }, 200)
      } else {
        this.$api.msg(message)
      }
    },
    async changeCardShowBox() {
      this.cardBoxShow = true
    },
    signChange() {
      this.sign = true
    },
    useragreementBtn() {
      uni.navigateTo({
        url: '/pages/login/contractofcarriage',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.myRecommendation-box {
  background: white;
  border-radius: 10rpx;

  .myRecommendation-top-box {
    width: 100%;
    font-size: 32rpx;
    color: #4b4b4b;

    .transTotalPrice-big-box {
      padding-right: 16rpx;
      white-space: nowrap;
      font-size: 24rpx;

      .transTotalPrice-box {
        white-space: nowrap;
        color: #e02020;
        font-size: 40rpx;
      }
    }
  }

  .content {
    padding: 0 16rpx;
  }

  .item-name-style {
    padding-left: 16rpx;
    font-weight: bold;
    width: 472rpx;
    height: 80rpx;
    background: #ebf2fe;
    border-radius: 0px 0px 41px 0px;
  }

  .myRecommendation-center-box {
    padding-bottom: 16rpx;

    .startingPoint-big-box {
      // background: #ebf2fe;
      border-radius: 10rpx;
      margin: 20rpx 0;
      padding: 22rpx 34rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-bottom: 1px splid #f2f2f2;
      align-items: center;
    }

    .address-icon {
      width: 163rpx;
      height: 13rpx;
    }

    .address-icon-lay {
      margin-left: -70rpx;
      margin-top: -20rpx;
      transform: rotate(45deg);
      width: 30rpx;
      height: 1rpx;
      border: 1rpx solid #f2f2f2;
    }

    .province-box {
      font-size: 36rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
    }

    .city-box {
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .weight-box {
      display: flex;
      flex-wrap: wrap;
      font-size: 24rpx;
      color: #000;
      margin-bottom: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #f2f2f2;

      .u-flex {
        width: 50%;
        line-height: 40rpx;
        .weight-box-lable {
          text-align: justify;
          text-align-last: justify;
          width: 120rpx;
        }

        .weight-box-content {
          color: black;
        }
      }
    }
  }
}
.sourcegoodsdetail-box {
  background-color: rgb(238, 238, 239);
  width: 100%;
  padding: 16rpx 24rpx;
  .sourcegoodsdetail-item-box {
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
  }
  .sourcegoodsdetail-item-img-box {
    .sourcegoodsdetail-item-box {
      border: none;
      white-space: nowrap;
    }
    display: flex;
    flex-wrap: wrap;
    view {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .img-box {
        width: 300rpx;
        height: 200rpx;
      }
    }
  }
  .card-list {
    height: 105rpx;
    border-bottom: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    margin: 0 30rpx;
    box-sizing: border-box;
  }
  .card-box {
    background: white;
    margin-top: 24rpx;
    border-radius: 10rpx;
    padding: 24rpx 24rpx 0;
    .card-icon-box {
      margin-left: 6rpx;
      position: relative;
      view:nth-child(1) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #57a3ff;
        position: absolute;
        top: -12rpx;
        left: 10rpx;
        z-index: 1;
      }
      view:nth-child(2) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #add3ff;
        position: absolute;
        top: -6rpx;
        left: 20rpx;
      }
    }
  }
  .sourcegoodsdetail-item-big-box {
    height: 90vh;
    overflow: hidden;
    overflow-y: scroll;
  }
  .btns {
    margin: 16rpx 0;
    .btn {
      width: 100%;
    }
  }
  .sourcegoodsdetail-item-box {
    text {
      width: 100%;
      display: inline-block;
      white-space: pre-wrap;
      word-wrap: break-word;
      height: auto;
    }
  }
}
.sign {
  color: #2e87fe;
}
.pop-title {
  position: relative;
  height: 95rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30rpx;
  box-sizing: border-box;
}
.pop-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 10rpx;
}
.bank-icon {
  width: 46rpx;
  height: 46rpx;
  margin-right: 20rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.bank-select {
  width: 32rpx;
  height: 32rpx;
  margin-left: auto;
  margin-right: 20rpx;
}
.changeCard {
  margin-left: auto;
}
</style>
